import React, { Component } from 'react';
import { Form, Input } from 'antd-mobile'
import { NavBar, Dialog, Space, Toast, Button } from 'antd-mobile'

import request from "../../api"

interface Props {

    history: any,
    location: any,
    match: any
}

interface State {
    massname: string,
    masspass: string,
    massyanzheng: string,
    phone?: string,
    password?: string,
    yanzhengma?: string,
    bool: boolean,
    boolmin:boolean
}

class Register extends Component<Props, State> {
    constructor(porps: Props) {
        super(porps);
        this.state = {
            massname: "",
            masspass: "",
            massyanzheng: "",
            phone: "",
            password: "",
            yanzhengma: "",
            bool: true,
            boolmin:true

        }
    }


    //发送验证码
    fasong() {


        if (this.state.phone != "") {
            request.user.user_dosendmsgcode({tel:this.state.phone}).then((ok) => {
                this.setState({ yanzhengma: ok.data.data + "" }, () => {
                    console.log(this.state.yanzhengma);

                })


            }).catch(() => { })
        } else {
            this.setState({ phone: "", massname: "手机号不能为空" })
        }



    }
    //提交注册
    zhuce() {
        if (this.state.phone == "") {
            this.setState({ massname: "手机号不能为空" })
        } else if (this.state.password == "") {
            this.setState({ masspass: "密码不能为空" })
        } else if (this.state.yanzhengma == "") {
            this.setState({ massyanzheng: "验证码不能为空" })
        } else {
            // this.props.history.push({ pathname:'/login' });
            Dialog.confirm({
                content: '是否注册',
                onConfirm: async () => {

                    
                    request.user.user_docheckcode({ tel: this.state.phone, telcode: this.state.yanzhengma }).then((ok) => {
                        console.log(ok.data);
                        if (ok.data.code == "200") {
                            request.user.user_dofinishregister({ tel: this.state.phone, password: this.state.password }).then((ok) => {
                                if (ok.data.code === "200") {
                                    Toast.show({
                                        icon: 'success',
                                        content: '注册成功',
                                        position: 'bottom',
                                    })
                                    console.log(ok.data);

                                    this.props.history.push({ pathname: '/login' });
                                }
                            })
                        }
                    })

                }
            })

        }
    }
    // 失去焦点验证手机号是否注册过 
    bulr(v: string) {
console.log(v);

        if (this.state.phone != "") {

            request.user.user_docheckphone({ tel: v }).then((ok) => {
                if (ok.data.code !== "200") {
                    console.log("用户已经注册");
                }else{
                    this.setState({boolmin:false})
                }



            }).catch((e) => {
                console.log(e);
            })
        }
    }
    maburl(e: any) {
        console.log(e.target.value, this.state.yanzhengma);

        if (e.target.value !== "") {
            if (e.target.value != this.state.yanzhengma) {
                this.setState({ massyanzheng: "验证码不正确" })
            } else {
                this.setState({ bool: false })
            }
        }

    }


    formRef: any = React.createRef()
    render() {

        return (
            <div className='login'>
                <NavBar>注册</NavBar>
                <Form

                    layout='horizontal' mode='card' footer={
                        <Button


                            disabled={this.state.bool} type='submit' block onClick={() => { this.zhuce() }} color='danger' size='large'>
                            注册
                        </Button>
                    }

                >
                    <Form.Item normalize={(value) => this.setState({ phone: value })} name="tel" label='手机号' initialValue={this.state.phone} rules={[{ required: true, message: this.state.phone == "" ? this.state.massname : "" }]}>
                        <Input onBlur={(e) => { this.bulr(e.target.value) }} placeholder='请输入账号/手机号' />
                    </Form.Item>
                    <Form.Item normalize={(value) => this.setState({ password: value })} name="password" initialValue={this.state.password} label='密码' rules={[{ required: true, message: this.state.password == "" ? this.state.masspass : "" }]}>
                        <Input placeholder='请输入密码' />
                    </Form.Item>
                    <Form.Item
                        initialValue={this.state.yanzhengma} name="yanzheng" label='短信验证码' extra={
                            <Button disabled={this.state.boolmin} type='submit' color='danger' onClick={() => { this.fasong() }}>发送验证码</Button>
                        } rules={[{ required: true, message: this.state.massyanzheng }]}>
                        <Input onBlur={(e) => { this.maburl(e) }} placeholder='请输入验证码' />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default Register;